<template>
  <NuxtLayout name="user" menuActive="6">
    <div class="box">
      <el-timeline>
        <el-table :data="tableData">
          <el-table-column label="科目">
            <template #default="scope">{{ scope.row.subject.name }}</template>
          </el-table-column>
          <el-table-column prop="score" label="考试分数" width="100" />
          <el-table-column label="考试耗时" width="100">
            <template #default="scope">{{ convertSecondsToHMS(scope.row.examSecond) }}</template>
          </el-table-column>
          <el-table-column label="状态" width="100">
            <template #default="scope">
              <el-tag type="danger" v-show="scope.row.status === 0">不合格</el-tag>
              <el-tag type="success" v-show="scope.row.status === 1">合格</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="100">
            <template #default="scope">
              <el-button type="success" size="small" @click="seeFn(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-timeline>
      <el-empty v-show="tableData.length < 1" />
      <div class="pagin" v-show="tableData.length > 0">
        <el-pagination background layout="prev, pager, next, total" :total="total" :default-current-page="parseInt(listForm.pageNum)" :page-size="listForm.pageSize"
          @change="pageChangeFn" />
      </div>
    </div>
    <MyForm :infoData="infoData" :visible="infoVisible" :infoTitle="infoTitle" @pick="infoPickFn" />
  </NuxtLayout>
</template>

<script setup>
import { exam, getRecord } from '~/server/api';
import { convertSecondsToHMS } from '~/utils/utils';
import MyForm from './form'
// TDK
const prevHost = useRequestHeaders()["x-forwarded-proto"];
const host = useRequestHeaders()["host"];
const fullPath = useRoute()["fullPath"];
useSeoMeta({
  title: "技考邦_考试记录",
  keywords: "技考邦,考试记录",
  description: "技考邦，考试记录。",
  ogTitle: "技考邦_考试记录",
  ogDescription: "技考邦，考试记录。",
  ogType: "article",
  ogUrl: `${prevHost}://${host}${fullPath}`,
})
const infoData = ref({})
const infoVisible = ref(false)
const infoTitle = ref('考试记录详情')
// 列表
const listForm = ref({
  pageNum: 1,
  pageSize: 10
})
const tableData = ref([])
const total = ref(0)
const getList = async () => {
  let { data: listRes } = await useAsyncData('exam', () => useServerRequest(exam, {
    method: 'post',
    body: JSON.stringify(listForm.value)
  }))
  if (listRes.value && listRes.value.errno === 0) {
    tableData.value = listRes.value.result.list;
    total.value = listRes.value.result.total;
  }
}
getList()
// 分页
const pageChangeFn = (val) => {
  useRouter().push(`/userCenter/ExamRecords?p=${val}`)
}
// 监听
watchEffect(() => {
  // 分页
  if (useRoute().query.p) {
    listForm.value.pageNum = useRoute().query.p;
    getList()
  }
})
// 查看
const seeFn = (val) => {
  if (val && val.id && val.subject) {
    infoTitle.value = val.subject.name
    infoVisible.value = true;
    useServerRequest(getRecord, {
      method: 'get',
      params: {
        id: val.id
      }
    }).then(res => {
      if (res && res.errno === 0 && res.result && res.result.examSetting) {
        infoData.value = res.result.examSetting;
        return false
      }
    })
    return false
  }
}
// 弹窗监听
const infoPickFn = (e) => {
  infoVisible.value = e.visible;
}
</script>

<style lang="less" scoped>
.box {
  padding: 30px;

  .pagin {
    margin-top: 30px;
    display: flex;
    justify-content: center;
  }
}
</style>